<template>
  <div>
    <acc-table :tableData="table" ref="accTable" :columnDefs="columnDefs" @select='handleSelect' @selection-change='handleSelectionChange'>
      <template #selection/>
      <template #order={index}>
        <span >{{index | orderIndex($parent.pageVo)}}</span>
      </template>
      <template #status={row}>
        <span class="cursor" style="display: inline-block;width: 100%;" :style="{'color': row.status === 2 ? 'red' : '' }" @click="handleStatus(row)">{{statusType[row.status]}}</span>
      </template>
       <template #telephoneNo={row}>
          {{ !isShow ? $options.filters.cellularPhone(row.telephoneNo) : row.telephoneNo || '--' }}
        </template>
      <template #reason={row}>
          <el-tooltip trigger="click" placement="top">
            <span slot="content">
              <div  style="max-width: 200px">{{row.reason}}</div>
            </span>
            <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;position: relative;">{{row.reason}}</div>
          </el-tooltip>
      </template>
      <template #action={row}>
        <el-popover placement="bottom" ref="propShow" width="200" trigger="click">
          <img v-if="row.antigenFileUrl" :src="`/gateway/api/basic/minio/getFileSource?fileName=${row.antigenFileUrl}`" alt="" style="width: 150px;height: 150px">
        <el-button v-if="checkAuthority('/teacher/select')" style="margin-right: 10px" :disabled='!row.antigenFileUrl'  slot="reference" size="mini" type="text">查看</el-button>
        </el-popover>
        <el-button size="mini" v-if="row.status === 0 && checkAuthority('/teacher/noti')" type="text" @click="handleInform(row)">通知</el-button>
        <el-button size="mini" v-if="row.status !== 0" type="text" disabled>已通知</el-button>
        <el-button size="mini" v-if="row.whiteListStauts === '0' && checkAuthority('/teacher/white/add')" type="text" @click="handleAddWhite(row)">加入白名单</el-button>
        <el-button size="mini" v-else-if="row.whiteListStauts === '1' && checkAuthority('/teacher/white/delete')" type="text" @click="handleDelWhite(row)">移除白名单</el-button>
      </template>
    </acc-table>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="45%"
      center>
      <AccStatus v-if="centerDialogVisible" :rowData='currentRow' @cancel='handleCancel'></AccStatus>
    </el-dialog>
  </div>
</template>

<script>
import { columnDefs } from './mock'
import AccStatus from '../../common/Status'
import { deleteWhiteList, addWhiteList, savePreventionMsgNotice } from '@/views/children/antiepidemic/js/preventionRiskScreen'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限

export default {
  components: { AccStatus },
  props: {
    table: {
      type: Array,
      default () {
        return []
      }
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShowPopo: false,
      statusType: { 0: '未通知', 1: '已通知', 2: '申诉中', 3: '申诉通过', 4: '申诉无效' },
      queryParams: {},
      columnDefs: [],
      tableData: [],
      currentRow: {},
      centerDialogVisible: false,
      tableAllSelectId: [],
      tableAllSelectRow: []
    }
  },
  created () {
    this.columnDefs = columnDefs
  },
  methods: {
    checkAuthority,
    handleIsShow (row) {
      if (row.nucleicFileUrl === null) {
        this.$nextTick(() => {
          this.isShowPopo = false
        })
      }
    },
    handleSelect (rows, row) {
      const selected = rows.length && rows.indexOf(row) !== -1
      if (!selected) {
        const index = this.tableAllSelectId.indexOf(row.id)
        this.tableAllSelectId.splice(index, 1)
        this.tableAllSelectRow.splice(index, 1)
      }
    },
    handleSelectionChange (val) {
      val.forEach(item => {
        if (this.tableAllSelectId.indexOf(item.id) === -1) {
          this.tableAllSelectId.push(item.id)
          this.tableAllSelectRow.push(item)
        }
      })
      console.log('this.', this.tableAllSelectRow)
      this.$emit('select-row', this.tableAllSelectRow)
    },
    handleStatus (row) {
      if (row.status !== 2) return
      this.currentRow = row
      this.centerDialogVisible = true
    },
    handleLook (row) {},
    handleInform (row) {
      this.$confirm('是否通知?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        savePreventionMsgNotice({ idList: [row.id] }).then(() => {
          this.$message.success(`已通知`)
          this.$parent.loadDataList()
        })
      }).catch(() => {})
    },
    handleAddWhite (row) {
      this.$confirm('是否加入白名单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        addWhiteList({ userNo: row.userNo, userType: row.userType, type: 1 }).then(() => {
          this.$message.success('加入白名单成功')
          this.$parent.loadDataList()
        })
      }).catch(() => {})
    },
    handleDelWhite (row) {
      this.$confirm('是否移除白名单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteWhiteList(row.whiteListId).then(() => {
          this.$message.success('移除白名单成功')
          this.$parent.loadDataList()
        })
      }).catch(() => {})
    },
    handleCancel (val) {
      this.centerDialogVisible = false
      if (val) this.$parent.loadDataList()
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
